<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>兼职分类</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
    <style>
        html,
        body {
            font-size: 14px;
            height: 100%;
            background-color: #f2f2f2;
        }

        header {
            height: 75px;
            position: fixed;
            top: 0;
            width: 100%;
            height: 75px;
            text-align: left;
            background-color: #FBB40E;
            border-bottom: 1px solid #fff;
            z-index: 999;
        }

        header .head {
            margin-top: 38px;
            color: #fff;
            text-align: center;
        }

        main {
            padding-top: 75px;
        }

        .infolist-content li {
            background-color: #fff;
            padding: 0.5rem 1rem;
            margin-bottom: 1px;
        }

        .infolist-content li div {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.3rem;
        }

        .jobname span:nth-child(1) {
            width: 80%;
            color: #333;
            font-size: 1.1rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .jobcompany {
            color: #989898;
            font-size: 1rem;
        }

        .jobcompany img {
            width: 1.5rem!important;
            height: 1.5rem!important;
            margin-right: 0.5rem;
        }

        .jobaddress .length span {
            font-size: 1rem;
            color: #FFBF78;
            padding: 0.1rem;
            border: 1px solid #FFBF78;
            border-radius: 0.35rem;
            margin-right: 0.5rem;
        }

        .jobaddress .readcount {
            color: #2E7AFA;
        }

        .readcount img {
            width: 1.5rem!important;
            height: 1.5rem!important;
            margin-right: 0.3rem;
        }
        .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
            color: #FFBF78;
        }
        .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar {
            background-color: #FFBF78;
        }
        .mui-control-item {
            background-color: #fff;
        }
        .mui-slider .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-group .mui-slider-item {
            border: none;
        }
        footer {
            padding: 0.5rem;
            color: #989898;
            font-size: 0.8rem;
            text-align: center;
        }
    </style>
</head>

<body>
    <header>
        <div class="head">
            <span>所有兼职</span>
        </div>
    </header>
    <main>
        <div class="mui-slider">
            <div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                <a class="mui-control-item" href="#item1">所有兼职</a>
                <a class="mui-control-item" href="#item2">最多人看</a>
            </div>
            <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
            <div class="mui-slider-group">
                <div id="item1" class="mui-slider-item mui-control-content mui-active">
                  <ul class="infolist-content allJobs">

                  </ul>
                </div>
                <div id="item2" class="mui-slider-item mui-control-content">
                  <ul class="infolist-content jobsBypeople">

                  </ul>
                </div>
            </div>
        </div>
    </main>
    <footer>--没有更多数据了--</footer>
</body>
<script type="text/template" id="allJob">
    {{~it.items:value:index}}
    <li data-id="{{=value.id}}" data-num="{{=value.readcount}}">
        <div class="jobname">
            <span>{{=value.jobname}}</span>
            <span style="color:#FEA82F">{{=value.salary}}</span>
        </div>
        <div class="jobcompany" style="color:#989898">
            <div>
                <img src="../image/icon/company.png" alt="">
                <span>{{=value.company}}</span>
            </div>
            <span>{{=value.address}}</span>
        </div>
        <div class="jobaddress" style="color:#989898">
            <div class="length">
                {{? value.paytype}}
                <span>{{=value.paytype}}</span> {{??}}
                <i></i> {{?}} {{? value.cyclelength}}
                <span>{{=value.cyclelength}}</span> {{??}}
                <i></i> {{?}} {{? value.type}}
                <span>{{=value.type}}</span> {{??}}
                <i></i> {{?}} {{? value.description}}
                <span>{{=value.description}}</span> {{??}}
                <i></i> {{?}}
            </div>
            <div class="readcount">
                <img src="../image/icon/hot.png" alt="">
                <span id="number">{{=value.readcount}}</span>
            </div>
        </div>
    </li>
    {{~}}
</script>
<script type="text/template" id="jobsBypeople">
    {{~it.items:value:index}}
    <li data-id="{{=value.id}}" data-num="{{=value.readcount}}">
        <div class="jobname">
            <span>{{=value.jobname}}</span>
            <span style="color:#FEA82F">{{=value.salary}}</span>
        </div>
        <div class="jobcompany" style="color:#989898">
            <div>
                <img src="../image/icon/company.png" alt="">
                <span>{{=value.company}}</span>
            </div>
            <span>{{=value.address}}</span>
        </div>
        <div class="jobaddress" style="color:#989898">
            <div class="length">
                {{? value.paytype}}
                <span>{{=value.paytype}}</span> {{??}}
                <i></i> {{?}} {{? value.cyclelength}}
                <span>{{=value.cyclelength}}</span> {{??}}
                <i></i> {{?}} {{? value.type}}
                <span>{{=value.type}}</span> {{??}}
                <i></i> {{?}} {{? value.description}}
                <span>{{=value.description}}</span> {{??}}
                <i></i> {{?}}
            </div>
            <div class="readcount">
                <img src="../image/icon/hot.png" alt="">
                <span id="number">{{=value.readcount}}</span>
            </div>
        </div>
    </li>
    {{~}}
</script>
<script src="../script/jquery-1.11.3.min.js" charset="utf-8"></script>
<script src="../script/api.js" charset="utf-8"></script>
<script src="../script/doT.min.js" charset="utf-8"></script>
<script src="../script/mui.min.js" charset="utf-8"></script>
<script type="text/javascript">
    apiready = function() {
        getAllJobs();
        getJobsByPeople();
    };
    function getAllJobs() {
        api.showProgress({
            style: 'default',
            animationType: 'fade',
            title: '努力加载中...',
            modal: false
        });
        api.ajax({
            url: 'http://122.112.138.133/wangt/jianzhi/queryJob.com',
            method: 'post',
            data: {
                body: {}
            }
        }, function(ret, err) {
            if (ret) {
                $('.allJobs').append(parttime_render('allJob', ret.data.records));
                api.hideProgress();
                $('.allJobs li').click(function() {
                    var num = Number($(this).attr('data-num')) + 1;
                    $(this).find('#number').text(num);
                    $(this).attr('data-num', num);
                    var id = $(this).attr('data-id');
                    api.ajax({
                        url: 'http://122.112.138.133/wangt/jianzhi/updateReadCount.com',
                        method: 'post',
                        data: {
                            body: {
                                'tbname': 'jobinfo',
                                'id': id,
                                'readcount': num
                            }
                        }
                    }, function(ret, err) {
                        if (ret) {}
                    });
                    api.openWin({
                        name: 'jobdetails',
                        url: './jobdetails.html',
                        pageParam: {
                            id: $(this).attr('data-id')
                        }
                    })
                })
            }
        });
    }

    function getJobsByPeople() {
        api.showProgress({
            style: 'default',
            animationType: 'fade',
            title: '努力加载中...',
            modal: false
        });
        api.ajax({
            url: 'http://122.112.138.133/wangt/jianzhi/queryJobBypeopleSee.com',
            method: 'post',
            data: {
                body: {}
            }
        }, function(ret, err) {
            if (ret) {
                $('.jobsBypeople').append(parttime_render('jobsBypeople', ret.data.records));
                api.hideProgress();
                $('.jobsBypeople li').click(function() {
                    var num = Number($(this).attr('data-num')) + 1;
                    $(this).find('#number').text(num);
                    $(this).attr('data-num', num);
                    var id = $(this).attr('data-id');
                    api.ajax({
                        url: 'http://122.112.138.133/wangt/jianzhi/updateReadCount.com',
                        method: 'post',
                        data: {
                            body: {
                                'tbname': 'jobinfo',
                                'id': id,
                                'readcount': num
                            }
                        }
                    }, function(ret, err) {
                        if (ret) {}
                    });
                    api.openWin({
                        name: 'jobdetails',
                        url: './jobdetails.html',
                        pageParam: {
                            id: $(this).attr('data-id')
                        }
                    })
                })
            }
        });
    }

    function parttime_render(id, elements, options) {
        var options = options || {};
        var elementObj = doT.template($api.byId(id).innerHTML);
        var elementData = $.extend({
            items: elements
        }, options);
        return elementObj(elementData);
    }
</script>

</html>
